import {uCancelShareDev, uSelectDevShareUser} from '@/api/deviceShare'
import useLoading from '@/hooks/loading'
import {getUserId} from '@/libs/auth'
import {FormInstance} from 'ant-design-vue'
import {PropType} from 'vue'
import {ChangeVisible} from '../modal'
import {CnBoldP, CnMediumSpan, CnNormalSpan} from '../text'
const CheckShareDevModalForm = defineComponent({
  props: {
    changeVisible: Function as PropType<ChangeVisible>,
    shareDetail: {
      type: Object as PropType<DeviceShare.ShareDetail>,
      required: true
    }
  },

  emits: {
    finish: (formRef?: FormInstance) => true,
    disShare: (): boolean => true,
    reset: (formRef?: FormInstance) => true
  },
  setup(props, {emit, slots}) {
    const {loading, startLoading, closeLoading} = useLoading()
    const state = reactive<{
      checked: string[]
      shareUserList: DeviceShare.DevShareUser | null
    }>({
      checked: [],
      shareUserList: null
    })

    function handleConfirmClick() {
      props.changeVisible && props.changeVisible(false)
    }

    function handleCancelClick() {
      props.changeVisible && props.changeVisible(false)
    }

    function getShareUserList() {
      const userId = getUserId()
      if (userId) {
        startLoading()
        uSelectDevShareUser({userId, devId: props.shareDetail.devId})
          .then(res => {
            state.shareUserList = res.data
            closeLoading()
          })
          .catch(err => {
            state.shareUserList = null
            closeLoading()
          })
      }
    }

    function disShare(userDevId: number) {
      uCancelShareDev({userDevId})
        .then(res => {
          getShareUserList()
          emit('finish')
        })
        .catch(err => {})
    }
    onMounted(() => {
      startLoading()
      getShareUserList()
    })

    return () => (
      <div class='relative'>
        {loading.value ? (
          <div class='flex items-center justify-center py-24'>
            <a-spin spinning={true}></a-spin>
          </div>
        ) : state.shareUserList && state.shareUserList.userDevList.length ? (
          <div class='h-500 px-24 py-20 flex items-start gap-x-12 overflow-hidden'>
            <div class='h-34 flex justify-center items-center'>
              <CnMediumSpan class='mr-24'>已分享</CnMediumSpan>
            </div>
            <div class='flex-1 h-full overflow-y-auto'>
              {state.shareUserList.userDevList.map(item => (
                <div class='grid grid-cols-3 place-content-center gap-x-12'>
                  <CnNormalSpan class='p-4'>{item.userName}</CnNormalSpan>
                  <CnNormalSpan class='p-4'>{item.createTime}</CnNormalSpan>
                  <div class='inline-flex justify-center items-center'>
                    <a-button
                      size='small'
                      class='bg-primary inline-flex justify-center items-center p-4'
                      onClick={() => disShare(item.userDevId)}
                    >
                      <CnNormalSpan class='text-12 text-white'>撤销分享</CnNormalSpan>
                    </a-button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ) : (
          <CnBoldP class='text-center mb-16'>暂未分享过此设备</CnBoldP>
        )}
        <div class='ant-modal-footer'>
          <a-button class='ant-btn' onClick={handleCancelClick}>
            取消
          </a-button>
          <a-button class='ant-btn' type='primary' onClick={handleConfirmClick}>
            确定
          </a-button>
        </div>
      </div>
    )
  }
})

export default CheckShareDevModalForm
